<template>
  <div id="camera">
    <div class="header">
      <van-swipe class="my-swipe" :autoplay="2000">
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" alt="" />
        </van-swipe-item>
      </van-swipe>
      <p class="text">有颜相机</p>
      <input type="text" class="search" placeholder="搜索" />
      <img src="../assets/pyimg/suosou.png" alt="" class="suosou" />
      <div class="title">
        <span class="sp1">美颜特效</span>
        <span class="sp2">试试自然无暇调整您的风格</span>
      </div>
    </div>
    <div class="middle">
      <div class="mid-item">
        <span class="p">图片精修</span>
        <img src="../assets/pyimg/jingxiu.png" alt="" class="img" />
      </div>
      <div class="mid-item1">
        <span class="p1">大头贴</span>
        <img src="../assets/pyimg/renxiang.png" alt="" class="img1" />
      </div>
      <div class="mid-item2">
        <span class="p2">逗趣拼图</span>
        <img src="../assets/pyimg/concat.png" alt="" class="img2" />
      </div>
      <div class="mid-item3">
        <span class="p3">专业PS修图</span>
        <img src="../assets/pyimg/xiutu.png" alt="" class="img3" />
      </div>
    </div>
    <div class="circle">
      <img src="../assets/pyimg/yuan.png" alt="" class="yuan" />
      <img
        src="../assets/pyimg/pohto.png"
        alt=""
        class="pohto"
        @click="goLast"
      />
      <p class="camera">相机</p>
    </div>
    <div class="footer">
      <router-view />
      <van-tabbar v-model="active" active-color="pink" route>
        <van-tabbar-item @click="toOther(0)" icon="wap-home-o"
          >首页</van-tabbar-item
        >
        <van-tabbar-item @click="toOther(1)" icon="apps-o"
          >发现</van-tabbar-item
        >
        <van-tabbar-item icon="cart-o" to="/travel">旅行</van-tabbar-item>
        <van-tabbar-item icon="user-o" @click="toOther(4)"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Search, Swipe, SwipeItem, Tabbar, TabbarItem } from "vant";
export default {
  components: {
    [Search.name]: Search,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  name: "Camera",
  setup() {
    //轮播图片
    const images = [
      require("@/assets/pyimg/tou.png"),
      require("@/assets/pyimg/tou2.png"),
      require("@/assets/pyimg/tou3.png"),
      require("@/assets/pyimg/yibo.png"),
    ];
    //跳转到有颜相机 TakePhotos
    const active = ref(0);
    const router = useRouter();
    const goLast = function () {
      router.push("/TakePhotos");
    };
    //路由跳转
    function toOther(val) {
      switch (val) {
        case 0:
          router.push({
            path: "/home/firstpage",
            query: {
              jyIndex: 0,
            },
          });
          break;
        case 1:
          router.push({
            path: "/home/community",
            query: {
              jyIndex: 1,
            },
          });
          break;
        case 4:
          router.push({
            path: "/home/mine",
            query: {
              jyIndex: 4,
            },
          });
          break;
        default:
          break;
      }
    }
    return {
      images,
      goLast,
      active,
      toOther,
    };
  },
};
</script>
<style lang="less" scoped>
#camera {
  position: relative;
  width: 414px;
  /deep/.header {
    width: 414px;
    height: 200px;
    /deep/.my-swipe {
      width: 414px;
      height: 200px;
    }
    img {
      width: 414px;
      height: 300px;
    }
    .text {
      position: absolute;
      color: honeydew;
      top: 60px;
      left: 30px;
      font-size: 18px;
      font-weight: 600;
    }
    .search {
      background-color: transparent;
      width: 200px;
      height: 20px;
      border-radius: 15px;
      position: absolute;
      top: 30px;
      left: 200px;
      font-size: 16px;
    }
    .suosou {
      width: 15px;
      height: 15px;
      position: absolute;
      top: 34px;
      left: 208px;
    }
    .title {
      position: absolute;
      top: 180px;
      left: 90px;
      width: 280px;
      height: 100px;
      .sp1 {
        width: 200px;
        position: absolute;
        font-size: 26px;
        font-weight: 600;
        left: 50px;
        top: -5px;
        color: #ffff;
      }
      .sp2 {
        width: 200px;
        font-size: 16px;
        color: #ffff;
        position: absolute;
        top: 38px;
        left: 0px;
      }
    }
  }
  .middle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 120px;
    width: 414px;
    .mid-item {
      position: relative;
      width: 160px;
      height: 100px;
      background-color: #fa9dcd;
      border-radius: 10px;
      margin-right: 10px;
      margin-bottom: 5px;
      .p {
        position: absolute;
        color: #fff;
        font-size: 20px;
        top: 50px;
        left: 45px;
        margin-top: 5px;
      }
      .img {
        position: absolute;
        width: 45px;
        height: 40px;
        top: 10px;
        left: 60px;
      }
    }
    .mid-item1 {
      position: relative;
      width: 160px;
      height: 100px;
      background-color: #6ef7cf;
      border-radius: 10px;
      .p1 {
        position: absolute;
        color: #fff;
        font-size: 20px;
        top: 50px;
        left: 45px;
        margin-top: 5px;
      }
      .img1 {
        position: absolute;
        width: 45px;
        height: 40px;
        top: 10px;
        left: 60px;
      }
    }
    .mid-item2 {
      position: relative;
      width: 160px;
      height: 100px;
      background-color: #6ef5f7;
      border-radius: 10px;
      margin-right: 10px;
      .p2 {
        position: absolute;
        color: #fff;
        font-size: 20px;
        top: 50px;
        left: 45px;
        margin-top: 5px;
      }
      .img2 {
        position: absolute;
        width: 45px;
        height: 40px;
        top: 10px;
        left: 60px;
      }
    }
    .mid-item3 {
      position: relative;
      width: 160px;
      height: 100px;
      background-color: #f3d279;
      border-radius: 10px;
      .p3 {
        position: absolute;
        color: #fff;
        font-size: 20px;
        top: 50px;
        left: 35px;
        margin-top: 5px;
      }
      .img3 {
        position: absolute;
        width: 45px;
        height: 40px;
        top: 10px;
        left: 60px;
      }
    }
  }
  .circle {
    position: relative;
    margin-top: 20px;
    width: 414px;
    .yuan {
      position: absolute;
      width: 130px;
      left: 152px;
    }
    .pohto {
      position: absolute;
      width: 45px;
      height: 40px;
      left: 195px;
      top: 40px;
    }
    .camera {
      font-size: 20px;
      position: absolute;
      left: 195px;
      top: 65px;
      color: #ffff;
    }
  }
  .footer {
    position: absolute;
    width: 200px;
    height: 50px;
    top: 700px;
    left: 100px;
  }
}
</style>
